<template>
	<div class="content">
		<div class="info">
			<div class="info-list">
				<div class="info-list-info">
					<div class="info-list-info-t flex1">
						山西天慈医院 <i class='more_gIcon'></i>
					</div>
					<van-cell-group :border='false'>
					  <van-cell :border='false' title="患者姓名" :value="info.pat_name" />
					  <van-cell :border='false' title="就诊科室" :value="info.apply_dept_name"/>
					  <van-cell value-class='c_FF1529' :border='false' title="缴费金额" :value="fee_charge.total_money+'元'"/>
					  <!-- <van-cell :border='false' title="开单时间" :value="info.receipt_time"/> -->
					</van-cell-group>
				</div>
				<div >
					<div class="payInfo">
						<!-- payIndex=i -->
						<div class="payInfo-i flex1" @click="payIndex=i" v-for="(v,i) in payList" :key='i'>
							<div class="payInfo-i-info">
								<img class="payInfo-i-img" :src="v.img" alt="">{{v.name}}
								<!-- <span style="padding-left: 10px;" class="newKttips" v-if='i==1'>即将开通，测试中，请用户勿使用</span> -->
							</div>
							<div class="payInfo-i-choose flex3">
								<img v-if='payIndex==i' src="@/assets/img/index/yes.png" alt="">
							</div>
						</div>
						<!-- <div class="newKttips">
							1.如选择医保支付,您需同意并授权平台将您的身份信息提供至微信及医保部门用于实名认证。
							<br>
							2.医保支付暂时不支持退费，请慎重选择。
						</div> -->
						
					</div>
					<div class="payBtn" @click="getPay()">立即支付</div>
					<div class="payTips">
						<span>支付须知：</span>
						<br>1.若选择医保支付，请确认当前就诊人为本人，否则无法进行后续操作。
						<br>2.如需退费，请到窗口办理退费。
					</div>
				</div>
			</div>
		</div>
		<back-img :isBackList='true' @toBacks='toBacks'></back-img>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				payList:[
					{name:'微信支付',img:require('@/assets/img/index/weixin.png'),type:'1'},
					{name:'医保支付',img:require('@/assets/img/index/yibao.png'),type:'2'}
				],
				payIndex:0,
				receipt_no:'',
				pid:'',
				info:{},
				fee_charge:{}
			};
		},
		created() {
			if(this.$route.query.pid){//详情
				this.receipt_no=this.$route.query.receipt_no
				this.pid=this.$route.query.pid
				var infos={
					query_key:'1',
					query_content:this.receipt_no
				}
				this.getInfos(infos)
			}
		},
		components: {

		},
		methods: {
			toBacks(){
				this.$router.push({
					path:'/pay',
					query:{},
				})
			},
			//获取支付链接
			getPay() {
				let that = this
				let url = "/api/his/pay_receipt";
				this.$axios.post(url,{
					pid:that.info.pid,
					receipt_no:that.info.receipt_no,
					actual_money:that.info.should_money,
					pay_type:that.payList[that.payIndex].type
				}).then(res => {
					if(res){
						console.log(res, '---')
						if(res.grantUrl){//医保支付
							var updatergstInfo={
								receipt_no:that.info.receipt_no,
							}
						    that.$store.commit("updatergst_no",that.info.receipt_no)
							that.$store.commit("updatergstInfo",updatergstInfo)
							
						    var authUrl=res.grantUrl
							window.location.href = authUrl
							return
						}
						var info=res.payInfo
						info.appId='wx7cbe187d6eb21122'
						console.log(info, '支付信息---')
						that.$wechat.pay(info, function(res) {
							if(res.err_msg == 'get_brand_wcpay_request:ok') {
								that.$toast('支付成功！')
								setTimeout(()=>{
									that.$router.replace("/pay")
								},1000)
							}else{
								that.$toast('支付失败！')
							}
						})
					}
				}).catch(err => {});
			},
			getInfos(info){
				let that=this
				let url = "/api/his/receipt_detail";
				this.$axios.post(url,info).then(res => {
					that.info=res.fee_item[0]
					that.fee_charge=res.fee_charge
				}).catch(err => {
					console.log("err", err);
				});
			},
			toPageLink(url){
				this.$router.push({
					path:url,
					query:{},
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.content{
		height: 100vh;
		background-color:#f0f8f8;
		/deep/.van-cell{
			padding: 7px 0;
		}
		/deep/.van-tabs__line{
			background: #4A8CFF;
		}
		/deep/.van-field__control{
			text-align: right;
		}
		/deep/.van-cell__title{
			font-size: 15px;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
		}
		/deep/.van-cell__value{
			font-size: 14px;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
		}
		.payTips{
			background: #FFFFFF;
			border-radius: 5px;
			padding: 12px;
			font-size: 11px;
			font-family: SourceHanSansCN;
			font-weight: 400;
			color: #999;
			line-height: 18px;
			span{
				color: #e7091a;
				display: inline-block;
				margin-bottom:7px;
			}
		}
		.payBtn{
			width: 296px;
			height: 38px;
			background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
			border-radius: 19px;
			margin: 23px auto 75px auto;
			font-size: 15px;
			font-family: MiSans;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			line-height: 38px;
		}
		.payInfo{
			background-color: #fff;
			border-radius: 5px;
			&-i{
				padding:10px 18px;
				font-size: 14px;
				font-family: SourceHanSansCN;
				font-weight: 400;
				color: #333333;
				&-info{
					display: flex;
					align-items: center;
				}
				&-img{
					width: 15px;
					margin-right:5px;
				}
				&-choose{
					width: 15px;
					height: 15px;
					background-color: #0ebea1;
					border-radius: 50%;
					img{
						width: 12px;
					}
				}
			}
			.newKttips{
				padding:0 20px 10px 40px;
				line-height: 20px;
				color: #999999;
			}
		}
		.info{
			padding-top: 10px;
			&-list{
				margin:0px 15px 10px 15px;
				&-info{
					padding-bottom: 7px;
					width: 346px;
					background: #FFFFFF;
					border-radius: 5px;
					padding: 0 11px;
					margin-bottom: 10px;
					&-t{
						padding: 15px 0;
						font-size: 15px;
						font-family: PingFang;
						font-weight: 500;
						color: #333333;
						border-bottom: 1px solid #EEEEEE;
						margin-bottom: 7px;
					}
				}
			}
		}
	}
</style>